<template>
	<!-- 回收订单页面(用户) -->
	<view class="redeem">
		<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
			<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(item.id)"
				:id="'top'+item.id">
				<text :class='tabbarIndex===item.id?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<view class="redeem-main">
			<none v-if="orderList.length==0"></none>
			<view v-else class="orderMain-orderlist">
				<!-- 已预约 -->
				<booked v-if="tabbarIndex==1" :orderList="orderList" @refresh="refresh"></booked>
				<!-- 已接单 -->
				<!-- 已完成 -->
				<completed v-if="tabbarIndex==3||tabbarIndex==2" :orderList="orderList" :tabbarIndex="tabbarIndex"></completed>
				<noMore v-if="!hasMore"></noMore>
				<view v-else class="loading">加载中...</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../component/commen/api/util';
	import noMore from "@/component/noMore.vue"
	import none from "@/otherPages/none/none.vue"
	import booked from "@/component/booked.vue"//已预约组件
	import completed from "@/component/completed.vue"//已完成组件
	export default {
		components:{
			noMore,none,booked,completed
		},
		data() {
			return {
				topbar: [ //顶部滑块的文字内容
					{
						id: 1,
						name: "已预约"
					},
					{
						id: 2,
						name: "已接单"
					},
					{
						id: 3,
						name: "已完成"
					}
				],
				tabbarIndex: 1, //选中的索引
				scrollIntoIndex: "top1", //顶栏跟随的索引id
				orderList: [], //页面数据
				page:1,//页
				psize:5,//每页条数
				hasMore:true,//是否还有更多数据
			};
		},
		onLoad(e) {
			this.tabbarIndex = parseInt(e.tabbarIndex)
			this.scrollIntoIndex = "top" + this.tabbarIndex
			console.log("默认进来的id", this.tabbarIndex)
			this.getorderList(this.tabbarIndex)
		},
		onShow() {

		},
		onReachBottom() {
			this.page++
			this.getorderList(this.tabbarIndex)
			console.log("触底加载")
		},
		methods: {
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				if (this.tabbarIndex === e) { //当前页
					return;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "top" + e
				this.page = 1
				this.orderList = []
				this.getorderList(this.tabbarIndex)
			},
			getorderList(value) { //获取订单数据
				var params = {
					do: "user",
					op: "reserveOrder",
					uid: uni.getStorageSync("uid"),
					is_status: value,
					page:this.page,
					psize:this.psize
				}
				util.requestWithSign(params).then(res => {
					console.log("请求结果：", res)
					this.orderList = this.orderList.concat(res.data.list)
					if(res.data.total==this.orderList.length){//数据已经加载完
						return this.hasMore = false
					}
				})
			},
			refresh(){//刷新数据
				console.log("数据刷新啦")
				this.page = 1
				this.orderList = []
				this.getorderList(this.tabbarIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.redeem {
		padding-bottom: 30rpx;
		// 顶部滑块
		.wasteScroll {
			width: 100%;
			height: 80rpx;
			white-space: nowrap;
			background: #fff;

			// box-shadow: #e3e3e3 0 0 8px;
			.slider {
				box-sizing: border-box;
				display: inline-block;
				// border: 1px solid #000;
				width: 33%;
				text-align: center;
				padding: 20rpx 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				box-sizing: border-box;
				padding: 10rpx 0;
				border-bottom: 6rpx solid #4fc3a5;
				color: #4fc3a5;
			}

			.f-color {
				// color: #ccc;
			}

			// .scrollItem-left{
			// 	height:100%;
			// }
		}

		.redeem-main {
			padding: 0 20rpx;
			box-sizing: border-box;

			.orderMain-orderlist {
				
			}
		}
	}
</style>